<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组splice和slice</title>
  <!-- 
  在JavaScript中， `splice` 和 `slice` 是数组对象的两个重要方法，它们用于操作数组，但有着不同的功能和用途。
  一、 `splice`  方法
  `splice`  方法用于改变原始数组，可以添加、删除或替换数组中的元素。
  array.splice(start, deleteCount, item1, item2, ...)
  - start：指定开始修改的索引位置（从0开始）。
  - deleteCount：可选，指定要删除的元素个数。如果为0，则不删除任何元素。
  - item1, item2, ...：可选，指定要添加到数组中的元素。

  1. 删除元素：
  let fruits = ['苹果', '香蕉', '橙子'];
  fruits.splice(1, 1); // 从索引1开始删除1个元素
  console.log(fruits); // 输出: ['苹果', '橙子']
  2. 添加元素：
  let fruits = ['苹果', '香蕉'];
  fruits.splice(1, 0, '橙子'); // 从索引1开始，不删除元素，添加'橙子'
  console.log(fruits); // 输出: ['苹果', '橙子', '香蕉']
  3. 替换元素：
  let fruits = ['苹果', '香蕉', '橙子'];
  fruits.splice(1, 1, '西瓜'); // 从索引1开始删除1个元素，并添加'西瓜'
  console.log(fruits); // 输出: ['苹果', '西瓜', '橙子']

  二、 `slice`  方法
  `slice`  方法用于提取数组的一部分并返回一个新数组，而不会改变原始数组。
  array.slice(start, end)
  - start：可选，指定提取的起始索引（包含该索引）。
  - end：可选，指定提取的结束索引（不包含该索引）。如果不指定，默认为数组的长度。
  1. 提取部分数组：
  let fruits = ['苹果', '香蕉', '橙子', '西瓜'];
  let citrus = fruits.slice(1, 3); // 提取索引1到索引3（不包含3）
  console.log(citrus); // 输出: ['香蕉', '橙子']
  2. 提取到数组末尾：
  let fruits = ['苹果', '香蕉', '橙子', '西瓜'];
  let lastTwo = fruits.slice(2); // 提取索引2到数组末尾
  console.log(lastTwo); // 输出: ['橙子', '西瓜']

  三、总结对比
  -  `splice` ：
    - 修改原始数组-操作数组利器（不是纯函数）。
    - 可以添加、删除或替换元素。
    - 返回被删除的元素数组（如果有删除）。

  -  `slice` ：
    - 不修改原始数组(纯函数)。
    - 仅提取数组的一部分，返回新数组。
    - 返回的数组是原数组的一个浅拷贝。
   -->
</head>

<body>

  <script>
    let fruits = ['苹果', '香蕉', '橙子', '西瓜'];
    // 1. slice 方法
    let citrus = fruits.slice(1, 3); // 提取索引1到索引3（不包含3）
    console.log(citrus); // 输出: ['香蕉', '橙子']

    let newArr = [].slice.apply(fruits, [1, 3]);
    console.log(newArr); // 输出: ['香蕉', '橙子']

    // 2. splice 方法
    fruits.splice(1, 1, '西瓜'); // 从索引1开始删除1个元素，并添加'西瓜'
    console.log(fruits); // 输出: ['苹果', '西瓜', '橙子']

    let removed = fruits.splice(1, 1); // 从索引1开始删除1个元素
    console.log(removed); // 输出: ['西瓜']

  </script>

</body>

</html>